.new-banner-wrapper {
  width: 100%;
  overflow: hidden;
  img {
    width: 100%;
    display: block;
  }
}
.new-module-container {
  overflow: hidden;
  .new-title {
    font-size: rem(32);
    color: #000;
    line-height: 1.2;
    padding: 0 rem(28);
  }
  .new-module-wrapper {
    overflow: hidden;
    box-sizing: border-box;
  }
}

.main-professional-courses {
  overflow: hidden;
  .item {
    margin-bottom: rem(36);
    .title {
      width: rem(335);
      height: rem(62);
      line-height: rem(62);
      text-align: center;
      font-size: rem(26);
      color: #FFFFFF;
      box-sizing: border-box;
      padding-right: rem(30);
      margin-bottom: rem(-30);
      position: relative;
      z-index: 2;
      &.title-1 {
        background: url('../image/new/music-bt-1.png') center no-repeat;
        background-size: 100% 100%;
      }
      &.title-2 {
        background: url('../image/new/music-bt-2.png') center no-repeat;
        background-size: 100% 100%;
      }
    }
    .content {
      width: 100%;
      height: rem(155);
      background-color: #F8F8F8;
      overflow: hidden;
      text-align: center;
      .txt {
        width: rem(550);
        margin: rem(60) auto 0;
        text-align: justify;
        color: #333333;
        font-size: rem(24);
        line-height: 1.4;
      }
    }
  }
}

.drama-performance-major {
  overflow: hidden;
  position: relative;
  img {
    display: block;
    width: 100%;
  }
  .btn {
    position: absolute;
    width: rem(152);
    height: rem(54);
    text-align: center;
    line-height: rem(54);
    background: #F66B42;
    border-radius: rem(10);
    top: rem(26);
    right: rem(125);
    font-size: rem(22);
    color: #FFFFFF;
    font-weight: bold;
  }
  .content {
    width: rem(480);
    text-align: center;
    font-size: rem(24);
    color: #FFFFFF;
    position: absolute;
    bottom: rem(20);
    left: 50%;
    line-height: 1.5;
    transform: translateX(-50%);
  }
}
.drama-performance-content {
  width: rem(650);
  margin: rem(46) auto;
  font-size: rem(24);
  color: #000;
  line-height: 1.6;
  text-align: justify;
}
.employment-directions {
  overflow: hidden;
  img {
    display: block;
    width: 100%;
  }
}

.new-course-tab {
  height: rem(56);
  line-height: rem(56);
  background: #F2FFFB;
  border-radius: rem(28);
  @include flex;
  margin-bottom: rem(36);
  .item {
    font-size: rem(30);
    color: #333333;
    flex: 1;
    border-radius: rem(28);
    text-align: center;
    &.active {
      color: #fff;
      background-color: #02C176;
    }
  }
}
.new-course-screen {
  @include flex(row,flex-start,center);
  margin-bottom: rem(15);
  .item-box {
    flex: 1;
    overflow: hidden;
    height: rem(60);
    transition: height 300ms;
    &.more {
      height: auto;
    }
    .item {
      float: left;
      height: rem(48);
      line-height: rem(48);
      padding: 0 rem(24);
      border-radius: rem(24);
      font-size: rem(24);
      color: #333333;
      margin-bottom: rem(12);
      &.active {
        background-color: #E8FFF8;
        color: #02C176;
      }
    }
  }
  .arrow {
    transform: rotate(90deg);
    @include arrow(38,#666,1);
    transition: all 300ms;
    &.more {
      transform: rotate(270deg);
    }
  }
}
.new-screen-choose {
  overflow: hidden;
  margin-bottom: rem(46);
  .item {
    float: left;
    @include flex(row,flex-start,center);
    overflow: hidden;
    .content {
      height: rem(46);
      line-height: rem(46);
      background: #02C176;
      border-radius: rem(23);
      padding: 0 rem(24);
      font-size: rem(20);
      color: #fff;
      margin-right: rem(8);
      margin-top: rem(10);
    }
    .close {
      width: rem(24);
      height: rem(24);
      background-color: #D9D9D9;
      border-radius: 50%;
      position: relative;
      &::before {
        content: '';
        width: 2px;
        height: 50%;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(45deg);
      }
      &::after {
        content: '';
        width: 2px;
        height: 50%;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) rotate(-45deg);
      }
    }
  }
}
.new-school-list {
  overflow: hidden;
  .item {
    height: rem(290);
    margin-bottom: rem(26);
    border-radius: rem(10);
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #eee;
    @include flex;
    .photo {
      width: rem(279);
      height: 100%;
      overflow: hidden;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .infos {
      flex: 1;
      overflow: hidden;
      box-sizing: border-box;
      height: 100%;
      padding: rem(32) 0 0 rem(32);
      line-height: 1.1;
      position: relative;
      .name {
        font-size: rem(26);
        color: #222222;
        margin-bottom: rem(10);
      }
      .country {
        font-size: rem(18);
        color: #333333;
        margin-bottom: rem(16);
      }
      .model-box {
        @include flex(row,center,flex-start);
        .txt {
          font-size: rem(18);
          color: #333333;
        }
        .model {
          height: rem(38);
          line-height: rem(38);
          background-color: #F2FFFB;
          padding: 0 rem(14);
          font-size: rem(18);
          color: #1C7D3E;
        }
      }
      .advantage {
        font-size: rem(18);
        color: #999999;
        line-height: rem(22);
        margin-top: rem(16);
        margin-bottom: rem(38);
        width: rem(340);
      }
      .area {
        font-size: rem(18);
        color: #1C7D3E;
      }
      .btns {
        position: absolute;
        right: rem(22);
        bottom: rem(18);
        a {
          display: block;
          float: left;
          width: rem(94);
          height: rem(40);
          line-height: rem(40);
          background: #02C176;
          border-radius: rem(20);
          margin-left: rem(16);
          font-size: rem(18);
          text-align: center;
          &.btn-1 {
            background-color: #D2FFED;
            color: #1C7D3E;
          }
          &.btn-2 {
            color: #fff;
          }
        }
      }
    }
  }
}
